<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理 - 组态可视化系统</title>
    <!-- 防止浏览器缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles/admin.css">
</head>
<body>
    <!-- 登录界面 -->
    <div class="login-container" id="loginContainer">
        <div class="login-box">
            <h1>🔐 后台管理登录</h1>
            <form id="adminLoginForm">
                <div class="form-group">
                    <label for="adminUsername">管理员账号</label>
                    <input type="text" id="adminUsername" name="username" autocomplete="username" required>
                </div>
                <div class="form-group">
                    <label for="adminPassword">管理员密码</label>
                    <input type="password" id="adminPassword" name="password" autocomplete="current-password" required>
                </div>
                <button type="submit" class="btn btn-primary">
                    <span class="loading hidden"></span>
                    登录管理后台
                </button>
                <div class="error-message" id="loginError">
                    账号或密码错误，请重试
                </div>
            </form>
        </div>
    </div>

    <!-- 管理界面 -->
    <div class="admin-container" id="adminContainer">
        <header class="header">
            <h1>📊 管理后台</h1>
            <div class="header-actions">
                <span class="user-info">欢迎，<span id="currentAdmin">admin</span></span>
                <button type="button" class="btn-logout" onclick="adminLogout()">退出登录</button>
            </div>
        </header>

        <div class="main-content">
            <nav class="sidebar">
                <a href="#" class="nav-item active" data-section="management">📁 项目管理</a>
                <a href="#" class="nav-item" data-section="recycle-bin">🗑️ 回收站</a>
                <a href="#" class="nav-item" data-section="resources">📦 资源管理</a>
                <a href="#" class="nav-item" data-section="auth">🔐 认证设置</a>
                <a href="#" class="nav-item" data-section="ui">🎨 界面配置</a>
                <a href="#" class="nav-item" data-section="camera">📷 相机控制</a>
                <a href="#" class="nav-item" data-section="editor">✏️ 编辑器设置</a>
                <a href="#" class="nav-item" data-section="performance">⚡ 性能优化</a>
                <a href="#" class="nav-item" data-section="debug">🐛 调试配置</a>
                <a href="#" class="nav-item" data-section="preview">👀 实时预览</a>
            </nav>

            <main class="content-area">
                <div id="alertContainer"></div>
                
                <!-- Toast 通知容器 -->
                <div id="toastContainer"></div>

                <!-- 确认对话框 -->
                <div id="confirmDialog">
                    <div class="confirm-box">
                        <div class="confirm-header">
                            <div class="confirm-icon" id="confirmIcon">⚠️</div>
                            <h3 class="confirm-title" id="confirmTitle">确认操作</h3>
                        </div>
                        <div class="confirm-body" id="confirmMessage">
                            确定要执行此操作吗？
                        </div>
                        <div class="confirm-footer">
                            <button type="button" class="confirm-btn confirm-btn-cancel" id="confirmCancelBtn">取消</button>
                            <button type="button" class="confirm-btn confirm-btn-confirm" id="confirmOkBtn">确定</button>
                        </div>
                    </div>
                </div>

                <!-- 项目管理 -->
                <section class="section active" id="management-section">
                    <!-- 项目列表 -->
                    <div style="margin-bottom: 40px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <h3 style="margin: 0; font-size: 18px; color: #333;">📁 项目列表</h3>
                            <div style="display: flex; gap: 10px;">
                                <button type="button" class="btn-primary" onclick="openCreateProjectModal()" style="padding: 8px 16px; font-size: 14px;">➕ 创建项目</button>
                                <button type="button" class="btn-preview" onclick="refreshManagement()">🔄 刷新</button>
                            </div>
                        </div>
                        <div id="projectsContainer">
                            <div class="loading" style="text-align: center; padding: 40px;">加载中...</div>
                        </div>
                    </div>
                    
                    <!-- 场景列表 -->
                    <div>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <h3 style="margin: 0; font-size: 18px; color: #333;">🎬 场景列表</h3>
                            <div style="display: flex; gap: 15px; align-items: center;">
                                <div id="selectedProjectName" style="font-size: 14px; color: #667eea; font-weight: 600;">
                                    未选择项目
                                </div>
                                <button type="button" class="btn-primary" onclick="openCreateSceneModal()" style="padding: 8px 16px; font-size: 14px;" id="createSceneBtn" disabled>➕ 创建场景</button>
                            </div>
                        </div>
                        <div id="scenesContainer">
                            <div style="text-align: center; padding: 40px; color: #999;">请在上方项目列表中点击项目名称</div>
                        </div>
                    </div>
                </section>

                <!-- 回收站 -->
                <section class="section" id="recycle-bin-section">
                    <div style="margin-bottom: 30px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <div>
                                <h3 style="margin: 0 0 8px 0; font-size: 18px; color: #333;">🗑️ 回收站</h3>
                                <p style="margin: 0; font-size: 13px; color: #999;">删除的项目将在回收站保留30天，期间可以恢复，30天后将自动彻底删除</p>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <button type="button" class="btn-preview" onclick="refreshRecycleBin()">🔄 刷新</button>
                                <button type="button" class="btn-delete" onclick="clearRecycleBin()" style="padding: 8px 16px; font-size: 14px;">🗑️ 清空回收站</button>
                            </div>
                        </div>
                        <div id="recycleBinContainer">
                            <div class="loading" style="text-align: center; padding: 40px;">加载中...</div>
                        </div>
                    </div>
                </section>

                <!-- 资源管理 -->
                <section class="section" id="resources-section">
                    <!-- 项目选择器 -->
                    <div style="margin-bottom: 30px;">
                        <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 15px;">
                            <label style="font-weight: 600; color: #333;">选择项目：</label>
                            <select id="resourceProjectSelector" onchange="loadResourceAnalysis()" style="flex: 1; max-width: 400px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px;">
                                <option value="">-- 请选择项目 --</option>
                            </select>
                            <button type="button" class="btn-preview" onclick="loadResourceAnalysis()">🔄 刷新数据</button>
                        </div>
                    </div>

                    <!-- 资源统计概览 -->
                    <div id="resourcesOverview" style="display: none; margin-bottom: 30px;">
                        <h3 style="margin-bottom: 20px; font-size: 20px; color: #333; border-bottom: 2px solid #667eea; padding-bottom: 10px;">📊 资源使用率统计</h3>
                        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
                            <!-- 模型统计卡片 -->
                            <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 20px; color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);">
                                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                                    <span style="font-size: 36px; margin-right: 12px;">🎨</span>
                                    <div>
                                        <h4 style="margin: 0 0 5px 0; font-size: 16px; opacity: 0.9;">模型资源</h4>
                                        <p style="margin: 0; font-size: 28px; font-weight: bold;" id="statsModelsTotal">0</p>
                                    </div>
                                </div>
                                <div style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 12px; margin-bottom: 10px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <span style="font-size: 14px;">已使用：<strong id="statsModelsUsed">0</strong></span>
                                        <span style="font-size: 14px;">未使用：<strong id="statsModelsUnused">0</strong></span>
                                    </div>
                                    <div style="background: rgba(255,255,255,0.3); height: 8px; border-radius: 4px; overflow: hidden;">
                                        <div id="statsModelsBar" style="background: white; height: 100%; border-radius: 4px; transition: width 0.3s ease; width: 0%;"></div>
                                    </div>
                                </div>
                                <div style="text-align: center; font-size: 20px; font-weight: bold;">使用率: <span id="statsModelsRate">0%</span></div>
                            </div>

                            <!-- 材质统计卡片 -->
                            <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; padding: 20px; color: white; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.3);">
                                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                                    <span style="font-size: 36px; margin-right: 12px;">🎭</span>
                                    <div>
                                        <h4 style="margin: 0 0 5px 0; font-size: 16px; opacity: 0.9;">材质资源</h4>
                                        <p style="margin: 0; font-size: 28px; font-weight: bold;" id="statsMaterialsTotal">0</p>
                                    </div>
                                </div>
                                <div style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 12px; margin-bottom: 10px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <span style="font-size: 14px;">已使用：<strong id="statsMaterialsUsed">0</strong></span>
                                        <span style="font-size: 14px;">未使用：<strong id="statsMaterialsUnused">0</strong></span>
                                    </div>
                                    <div style="background: rgba(255,255,255,0.3); height: 8px; border-radius: 4px; overflow: hidden;">
                                        <div id="statsMaterialsBar" style="background: white; height: 100%; border-radius: 4px; transition: width 0.3s ease; width: 0%;"></div>
                                    </div>
                                </div>
                                <div style="text-align: center; font-size: 20px; font-weight: bold;">使用率: <span id="statsMaterialsRate">0%</span></div>
                            </div>

                            <!-- 贴图统计卡片 -->
                            <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 12px; padding: 20px; color: white; box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);">
                                <div style="display: flex; align-items: center; margin-bottom: 15px;">
                                    <span style="font-size: 36px; margin-right: 12px;">🖼️</span>
                                    <div>
                                        <h4 style="margin: 0 0 5px 0; font-size: 16px; opacity: 0.9;">贴图资源</h4>
                                        <p style="margin: 0; font-size: 28px; font-weight: bold;" id="statsTexturesTotal">0</p>
                                    </div>
                                </div>
                                <div style="background: rgba(255,255,255,0.2); border-radius: 8px; padding: 12px; margin-bottom: 10px;">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                                        <span style="font-size: 14px;">已使用：<strong id="statsTexturesUsed">0</strong></span>
                                        <span style="font-size: 14px;">未使用：<strong id="statsTexturesUnused">0</strong></span>
                                    </div>
                                    <div style="background: rgba(255,255,255,0.3); height: 8px; border-radius: 4px; overflow: hidden;">
                                        <div id="statsTexturesBar" style="background: white; height: 100%; border-radius: 4px; transition: width 0.3s ease; width: 0%;"></div>
                                    </div>
                                </div>
                                <div style="text-align: center; font-size: 20px; font-weight: bold;">使用率: <span id="statsTexturesRate">0%</span></div>
                            </div>
                        </div>
                    </div>

                    <!-- Tab 切换器 -->
                    <div id="resourceTabContainer" style="display: none;">
                        <div style="border-bottom: 2px solid #e2e8f0; margin-bottom: 20px;">
                            <button type="button" class="resource-tab active" data-tab="scenes" onclick="switchResourceTab('scenes')">🎬 场景分析</button>
                            <button type="button" class="resource-tab" data-tab="models" onclick="switchResourceTab('models')">🎨 模型列表</button>
                            <button type="button" class="resource-tab" data-tab="materials" onclick="switchResourceTab('materials')">🎭 材质列表</button>
                            <button type="button" class="resource-tab" data-tab="textures" onclick="switchResourceTab('textures')">🖼️ 贴图列表</button>
                        </div>

                        <!-- 场景分析 -->
                        <div class="resource-tab-content active" id="scenesTab">
                            <!-- 场景选择器 -->
                            <div id="sceneTabsContainer" style="border-bottom: 2px solid #e2e8f0; margin-bottom: 20px; display: none;">
                                <!-- 动态生成场景Tab -->
                            </div>
                            
                            <!-- 场景内容容器 -->
                            <div id="sceneContentContainer">
                                <div class="empty-state"><p>请先选择项目并加载场景数据</p></div>
                            </div>
                        </div>

                        <!-- 模型列表 -->
                        <div class="resource-tab-content" id="modelsTab">
                            <div style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                                <label style="display: flex; align-items: center; gap: 5px;">
                                    <input type="checkbox" id="filterUnusedModels" onchange="filterResourceTable('models')">
                                    <span>仅显示未使用</span>
                                </label>
                            </div>
                            <div id="modelsTableContainer"></div>
                        </div>

                        <!-- 材质列表 -->
                        <div class="resource-tab-content" id="materialsTab">
                            <div style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                                <label style="display: flex; align-items: center; gap: 5px;">
                                    <input type="checkbox" id="filterUnusedMaterials" onchange="filterResourceTable('materials')">
                                    <span>仅显示未使用</span>
                                </label>
                            </div>
                            <div id="materialsTableContainer"></div>
                        </div>

                        <!-- 贴图列表 -->
                        <div class="resource-tab-content" id="texturesTab">
                            <div style="margin-bottom: 15px; display: flex; align-items: center; gap: 10px;">
                                <label style="display: flex; align-items: center; gap: 5px;">
                                    <input type="checkbox" id="filterUnusedTextures" onchange="filterResourceTable('textures')">
                                    <span>仅显示未使用</span>
                                </label>
                            </div>
                            <div id="texturesTableContainer"></div>
                        </div>
                    </div>

                    <!-- 空状态提示 -->
                    <div id="resourcesEmptyState" style="text-align: center; padding: 60px 20px; color: #999;">
                        <div style="font-size: 48px; margin-bottom: 20px;">📦</div>
                        <p style="font-size: 16px;">请先在上方选择一个项目来查看资源统计</p>
                    </div>
                </section>

                <!-- 认证设置 -->
                <section class="section" id="auth-section">
                    <div class="config-grid">
                        <!-- 项目登录账号 -->
                        <div class="config-item">
                            <h3>📱 项目登录账号</h3>
                            <p style="color: #999; font-size: 13px; margin-bottom: 15px;">用于普通用户访问 Three.js 项目的登录凭据</p>
                            <div class="config-field">
                                <label for="auth-projectUsername">用户名</label>
                                <input type="text" id="auth-projectUsername" value="123" readonly style="background-color: #f5f5f5;">
                                <small style="color: #999; display: block; margin-top: 5px;">项目用户名固定为 "123"</small>
                            </div>
                            <div class="config-field">
                                <label for="auth-projectPassword">密码</label>
                                <input type="password" id="auth-projectPassword" placeholder="输入新密码（留空不修改）" autocomplete="new-password">
                                <small style="color: #999; display: block; margin-top: 5px;">默认密码为 "123"，可以在此修改</small>
                            </div>
                            <div class="config-field">
                                <button type="button" class="btn-primary" onclick="updateProjectPassword()" style="margin-top: 10px;">更新项目密码</button>
                            </div>
                        </div>

                        <!-- 管理员账号 -->
                        <div class="config-item">
                            <h3>🔐 管理员账号</h3>
                            <p style="color: #999; font-size: 13px; margin-bottom: 15px;">用于登录此管理后台的管理员凭据</p>
                            <div class="config-field">
                                <label for="auth-adminUsername">用户名</label>
                                <input type="text" id="auth-adminUsername" value="admin" readonly style="background-color: #f5f5f5;">
                                <small style="color: #999; display: block; margin-top: 5px;">管理员用户名由系统管理</small>
                            </div>
                            <div class="config-field">
                                <label for="auth-adminPassword">密码</label>
                                <input type="password" id="auth-adminPassword" placeholder="输入新密码（留空不修改）" autocomplete="new-password">
                                <small style="color: #999; display: block; margin-top: 5px;">为了安全，请定期更新管理员密码</small>
                            </div>
                            <div class="config-field">
                                <button type="button" class="btn-primary" onclick="updateAdminPassword()" style="margin-top: 10px;">更新管理员密码</button>
                            </div>
                        </div>

                        <!-- 会话设置 -->
                        <div class="config-item">
                            <h3>⚙️ 会话设置</h3>
                            <div class="config-field">
                                <label style="display: flex; align-items: center; gap: 10px;">
                                    <input type="checkbox" id="auth-enabled">
                                    <span style="display: flex; flex-direction: column;">
                                        <strong>启用项目登录授权</strong>
                                        <small style="color: #999; font-weight: normal;">关闭后，访问项目无需登录，直接进入主界面</small>
                                    </span>
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="auth-sessionTimeout">会话超时时间（小时）</label>
                                <input type="number" id="auth-sessionTimeout" min="1" max="168" placeholder="24">
                                <small style="color: #999; display: block; margin-top: 5px;">用户登录后保持登录状态的时长</small>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="auth-autoLogin"> 启用自动登录
                                </label>
                                <small style="color: #999; display: block; margin-top: 5px;">记住登录状态，下次访问自动登录</small>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 界面配置 -->
                <section class="section" id="ui-section">
                    <div class="config-grid">
                        <div class="config-item">
                            <h3>主题设置</h3>
                            <div class="config-field">
                                <label for="ui-theme">界面主题</label>
                                <select id="ui-theme">
                                    <option value="dark">深色主题</option>
                                    <option value="light">浅色主题</option>
                                </select>
                            </div>
                            <div class="config-field">
                                <label for="ui-panelPosition">控制面板位置</label>
                                <select id="ui-panelPosition">
                                    <option value="top-left">左上角</option>
                                    <option value="top-right">右上角</option>
                                    <option value="bottom-left">左下角</option>
                                    <option value="bottom-right">右下角</option>
                                </select>
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>显示设置</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="ui-showUserInfo"> 显示用户信息
                                </label>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="ui-showCameraTips"> 显示相机操作提示
                                </label>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="ui-showSceneInfo"> 显示场景信息
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="ui-panelOpacity">面板透明度: <span class="range-value" id="ui-panelOpacity-value">0.7</span></label>
                                <input type="range" id="ui-panelOpacity" min="0.1" max="1" step="0.1" value="0.7">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 相机控制 -->
                <section class="section" id="camera-section">
                    <div class="config-grid">
                        <div class="config-item">
                            <h3>默认位置</h3>
                            <div class="config-field">
                                <label for="camera-defaultPosition">默认位置 [x, y, z]</label>
                                <input type="text" id="camera-defaultPosition" placeholder="8, 6, 8">
                            </div>
                            <div class="config-field">
                                <label for="camera-defaultTarget">观察目标 [x, y, z]</label>
                                <input type="text" id="camera-defaultTarget" placeholder="0, 0, 0">
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>角度限制</h3>
                            <div class="config-field">
                                <label for="camera-minPolarAngle">最小极角: <span class="range-value" id="camera-minPolarAngle-value">0.1</span></label>
                                <input type="range" id="camera-minPolarAngle" min="0" max="1.57" step="0.1" value="0.1">
                            </div>
                            <div class="config-field">
                                <label for="camera-maxPolarAngle">最大极角: <span class="range-value" id="camera-maxPolarAngle-value">3.04</span></label>
                                <input type="range" id="camera-maxPolarAngle" min="1.57" max="3.14" step="0.1" value="3.04">
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>控制设置</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="camera-enableDamping"> 启用阻尼
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="camera-dampingFactor">阻尼系数: <span class="range-value" id="camera-dampingFactor-value">0.05</span></label>
                                <input type="range" id="camera-dampingFactor" min="0.01" max="0.2" step="0.01" value="0.05">
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>交互控制</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="camera-enableZoom"> 启用缩放
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="camera-zoomSpeed">缩放速度: <span class="range-value" id="camera-zoomSpeed-value">1.0</span></label>
                                <input type="range" id="camera-zoomSpeed" min="0.1" max="3.0" step="0.1" value="1.0">
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="camera-enablePan"> 启用平移
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="camera-panSpeed">平移速度: <span class="range-value" id="camera-panSpeed-value">1.0</span></label>
                                <input type="range" id="camera-panSpeed" min="0.1" max="3.0" step="0.1" value="1.0">
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="camera-enableRotate"> 启用旋转
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="camera-rotateSpeed">旋转速度: <span class="range-value" id="camera-rotateSpeed-value">1.0</span></label>
                                <input type="range" id="camera-rotateSpeed" min="0.1" max="3.0" step="0.1" value="1.0">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 编辑器设置 -->
                <section class="section" id="editor-section">
                    <div class="config-grid">
                        <div class="config-item">
                            <h3>功能开关</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="editor-enableGeometryLibrary"> 启用几何体库
                                </label>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="editor-enableModelLibrary"> 启用模型库
                                </label>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="editor-dragLabelEnabled"> 显示拖拽标签
                                </label>
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>预览设置</h3>
                            <div class="config-field">
                                <label for="editor-previewOpacity">预览透明度: <span class="range-value" id="editor-previewOpacity-value">0.6</span></label>
                                <input type="range" id="editor-previewOpacity" min="0.1" max="1" step="0.1" value="0.6">
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="editor-previewAnimation"> 预览动画
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="editor-defaultModelPath">默认模型路径</label>
                                <input type="text" id="editor-defaultModelPath" placeholder="res/models/">
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 性能优化 -->
                <section class="section" id="performance-section">
                    <div class="config-grid">
                        <div class="config-item">
                            <h3>渲染设置</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="performance-enableShadows"> 启用阴影
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="performance-shadowMapSize">阴影贴图大小</label>
                                <select id="performance-shadowMapSize">
                                    <option value="512">512</option>
                                    <option value="1024">1024</option>
                                    <option value="2048">2048</option>
                                    <option value="4096">4096</option>
                                </select>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="performance-antialias"> 启用抗锯齿
                                </label>
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>性能控制</h3>
                            <div class="config-field">
                                <label for="performance-maxFPS">最大帧率（0=无限制）</label>
                                <input type="number" id="performance-maxFPS" min="0" max="144" placeholder="60">
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="performance-enableStats"> 显示性能统计
                                </label>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 调试配置 -->
                <section class="section" id="debug-section">
                    <div class="config-grid">
                        <div class="config-item">
                            <h3>调试开关</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="debug-enabled"> 启用调试模式
                                </label>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="debug-showConsole"> 显示控制台日志
                                </label>
                            </div>
                            <div class="config-field">
                                <label for="debug-logLevel">日志级别</label>
                                <select id="debug-logLevel">
                                    <option value="debug">Debug</option>
                                    <option value="info">Info</option>
                                    <option value="warn">Warn</option>
                                    <option value="error">Error</option>
                                </select>
                            </div>
                        </div>
                        <div class="config-item">
                            <h3>性能监控</h3>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="debug-showFPS"> 显示FPS计数器
                                </label>
                            </div>
                            <div class="config-field">
                                <label>
                                    <input type="checkbox" id="debug-showMemory"> 显示内存使用
                                </label>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 实时预览 -->
                <section class="section" id="preview-section">
                    <div class="config-item">
                        <h3>配置预览</h3>
                        <div class="config-field">
                            <label for="configPreview">当前配置（JSON格式）</label>
                            <textarea id="configPreview" rows="20" readonly style="font-family: monospace; font-size: 12px;"></textarea>
                        </div>
                        <div class="actions">
                            <button type="button" class="btn-preview" onclick="refreshPreview()">🔄 刷新预览</button>
                            <button type="button" class="btn-preview" onclick="copyConfig()">📋 复制配置</button>
                        </div>
                    </div>
                </section>

            </main>
        </div>
    </div>

    <!-- 外部JavaScript模块 -->
    <script type="module" src="scripts/admin/adminManager.js?v=4.1.2"></script>

    <!-- 创建项目 Modal -->
    <div id="createProjectModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center;" onclick="if(event.target === this) closeCreateProjectModal()">
        <div style="background: white; border-radius: 12px; padding: 0; width: 90%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
            <div style="padding: 20px 25px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
                <h3 style="margin: 0; font-size: 18px; color: #333;">📁 创建新项目</h3>
                <button type="button" onclick="closeCreateProjectModal()" style="background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0; line-height: 1;">&times;</button>
            </div>
            <div style="padding: 25px;">
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 600; font-size: 14px;">项目名称 *</label>
                    <input type="text" id="newProjectName" placeholder="请输入项目名称" style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; box-sizing: border-box;" onkeypress="if(event.key==='Enter') confirmCreateProject()">
                </div>
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 600; font-size: 14px;">项目描述</label>
                    <textarea id="newProjectDescription" placeholder="请输入项目描述（可选）" rows="3" style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; resize: vertical; box-sizing: border-box;"></textarea>
                </div>
            </div>
            <div style="padding: 15px 25px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px;">
                <button type="button" onclick="closeCreateProjectModal()" style="padding: 8px 20px; border: 1px solid #e2e8f0; background: white; color: #666; border-radius: 6px; cursor: pointer; font-size: 14px;">取消</button>
                <button type="button" onclick="confirmCreateProject()" style="padding: 8px 20px; border: none; background: #667eea; color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">创建</button>
            </div>
        </div>
    </div>

    <!-- 项目设置 Modal -->
    <div id="projectSettingsModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center;" onclick="if(event.target === this) closeProjectSettingsModal()">
        <div style="background: white; border-radius: 12px; padding: 0; width: 90%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
            <div style="padding: 20px 25px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
                <h3 style="margin: 0; font-size: 18px; color: #333;">⚙️ 项目设置 - <span id="settingsProjectName"></span></h3>
                <button type="button" onclick="closeProjectSettingsModal()" style="background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0; line-height: 1;">&times;</button>
            </div>
            <div style="padding: 25px;">
                <input type="hidden" id="settingsProjectId" />
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 600; font-size: 14px;">批量下载并发数</label>
                    <div style="display: flex; align-items: center; gap: 15px;">
                        <input type="number" id="settingsMaxConcurrent" min="1" max="20" value="3" 
                               style="flex: 1; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; box-sizing: border-box;"
                               oninput="document.getElementById('settingsConcurrentValue').textContent = this.value">
                        <span id="settingsConcurrentValue" style="padding: 8px 16px; background: rgba(74, 158, 255, 0.2); border-radius: 6px; color: #4a9eff; font-weight: 600; font-size: 16px; min-width: 40px; text-align: center;">3</span>
                    </div>
                    <small style="color: #999; display: block; margin-top: 8px;">设置该项目批量下载模型时的最大并发数（1-20）</small>
                </div>
                <div style="padding: 12px; background: #f7fafc; border-radius: 6px; font-size: 13px; color: #666; margin-top: 15px;">
                    <strong>💡 推荐配置：</strong>
                    <ul style="margin: 8px 0 0 0; padding-left: 20px;">
                        <li>小型项目（< 20个模型）：3-5</li>
                        <li>中型项目（20-50个模型）：5-8</li>
                        <li>大型项目（> 50个模型）：8-10</li>
                    </ul>
                </div>
            </div>
            <div style="padding: 15px 25px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px;">
                <button type="button" onclick="closeProjectSettingsModal()" style="padding: 8px 20px; border: 1px solid #e2e8f0; background: white; color: #666; border-radius: 6px; cursor: pointer; font-size: 14px;">取消</button>
                <button type="button" onclick="saveProjectSettings()" style="padding: 8px 20px; border: none; background: #667eea; color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">保存</button>
            </div>
        </div>
    </div>

    <!-- 创建场景 Modal -->
    <div id="createSceneModalAdmin" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; align-items: center; justify-content: center;" onclick="if(event.target === this) closeCreateSceneModalAdmin()">
        <div style="background: white; border-radius: 12px; padding: 0; width: 90%; max-width: 500px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
            <div style="padding: 20px 25px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
                <h3 style="margin: 0; font-size: 18px; color: #333;">🎬 创建新场景</h3>
                <button type="button" onclick="closeCreateSceneModalAdmin()" style="background: none; border: none; font-size: 24px; color: #999; cursor: pointer; padding: 0; line-height: 1;">&times;</button>
            </div>
            <div style="padding: 25px;">
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 600; font-size: 14px;">场景名称 *</label>
                    <input type="text" id="newSceneNameAdmin" placeholder="请输入场景名称" style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; box-sizing: border-box;" onkeypress="if(event.key==='Enter') confirmCreateSceneAdmin()">
                </div>
                <div style="margin-bottom: 20px;">
                    <label style="display: block; margin-bottom: 8px; color: #555; font-weight: 600; font-size: 14px;">场景描述</label>
                    <textarea id="newSceneDescriptionAdmin" placeholder="请输入场景描述（可选）" rows="3" style="width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; resize: vertical; box-sizing: border-box;"></textarea>
                </div>
                <div style="padding: 12px; background: #f7fafc; border-radius: 6px; font-size: 13px; color: #666;">
                    <strong>💡 提示：</strong> 新场景将自动创建为 GroundScene 类型，包含默认地面和灯光。
                </div>
            </div>
            <div style="padding: 15px 25px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px;">
                <button type="button" onclick="closeCreateSceneModalAdmin()" style="padding: 8px 20px; border: 1px solid #e2e8f0; background: white; color: #666; border-radius: 6px; cursor: pointer; font-size: 14px;">取消</button>
                <button type="button" onclick="confirmCreateSceneAdmin()" style="padding: 8px 20px; border: none; background: #667eea; color: white; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600;">创建</button>
            </div>
        </div>
    </div>

</body>
</html>
